<template>
    <div>
        <el-card :body-style="{ padding: '0px' }">
            <div class="blacklist_top">
                <span class="textPadding">注册手机号</span>
                <el-input class="phoneInp" v-model="quertInfo.regphone" placeholder="请输入注册手机号"></el-input>
                <el-button type="primary" class="chaxunBtn" @click="chaxun">查询</el-button>
            </div>
            <div class="blacklist_bottom">
                <div class="blacklist_bottom_title">黑名单列表</div>
                <div class="blacklist_bottom_tablede">
                    <!-- <span></span>
                    <span></span>
                    <span>表号：P001-MK001-BK001</span> -->
                </div>
                <el-table
                    :data="tableData"
                    border
                    :summary-method="getSummaries"
                    show-summary
                    class="userTable"
                    style="width: 98%">
                    <el-table-column
                        type="selection"
                        width="66">
                    </el-table-column>
                    <el-table-column
                        prop="xuhao"
                        width="75"
                        sortable
                        label="序号">
                    </el-table-column>
                    <el-table-column
                        type="index"
                        label="本页序号"
                        sortable
                        width="83">
                    </el-table-column>
                    <el-table-column
                        prop="userId"
                        width="118"
                        sortable
                        label="会员ID">
                    </el-table-column>
                    <el-table-column
                        prop="regPhone"
                        sortable
                        width="132"
                        label="注册手机号">
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        sortable
                        width="163"
                        label="姓名">
                    </el-table-column>
                    <el-table-column
                        prop="regShijian"
                        sortable
                        width="329"
                        label="注册时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="success" plain
                                @click="toxibai(scope.$index)"
                            >洗白</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @current-change="handleCurrentChange"
                    style="float:right"
                    background
                    :current-page="quertInfo.pagenum"
                    :page-size="quertInfo.pagesize"
                    layout="prev, pager, next, total"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data () {
        return {
            userId:'',
            quertInfo:{
                pagenum:1,
                pagesize:10,
				regphone:''
            },
            total:0,
            tableData: []
        }
    },
    methods:{
        chaxun(){
            this.getList()
        },
        toxibai(x){
            this.$confirm('确定洗白?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.userId = this.tableData[x].userId;
                    this.okXibai()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消洗白',
                        offset:'65',
                        duration:1000
                    });          
            });
        },
        okXibai(){
            this.$http.post('addWhitelist',{userId:this.userId}).then((data)=>{
                if(data.data.success){
                    var num = data.data.msg.length;
                    if ( num>1 ) this.$message({
                    	showClose: true,
                    	message: data.data.msg,
                    	type: 'success',
                    	offset:'65',
                    	duration:1000
                    });
                    this.getList()
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        },
        getSummaries(param){
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index)=>{
                if(index === 0){
                    sums[index] = '合计';
                }else if(index === 1){
                    sums[index] = this.tableData.length;
                }else if(index === 2){
                    sums[index] = this.tableData.length;
                }else{
                    sums[index] = '*';
                }
            })
            return sums;
        },
        getList(){
            this.$http.post('getBlacklist',this.quertInfo).then((data)=>{
                if(data.data.success){
                    var num = data.data.msg.length;
                    if ( num>1 ) this.$message({
                    	showClose: true,
                    	message: data.data.msg,
                    	type: 'success',
                    	offset:'65',
                    	duration:1000
                    });
                    this.tableData = data.data.data.tableData;
                    this.total = data.data.data.total
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        },
        handleCurrentChange(newPage){
            this.quertInfo.pagenum = newPage;
            this.getList()
        }
    },
    created(){
        this.getList()
    }
}
</script>

<style scoped>
.el-card{
    margin: 8px;
}
.blacklist_top{
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
}
.phoneInp{
    width: 180px;
}
.textPadding{
    font-size: 14px;
    margin: 0 14px;
}
.chaxunBtn{
    width: 117px;
    margin-left: 20px;
}
.fengjinBtn{
    background-color: #2AD198;
    color: #fff;
    width: 117px;
    margin-left: 100px;
}
.blacklist_bottom_title{
    text-align: center;
    font-weight: 600;
    padding: 20px 0 10px;
}
.blacklist_bottom_tablede{
    display: flex;
    justify-content: space-between;
}
.userTable{
    margin: 10px;
}
.blacklist_bottom{
    height: 670px;
}
</style>